import React, { useState } from 'react';
import { connect } from 'umi';
import { Modal, Button, Form, Input, Checkbox, Select, InputNumber, DatePicker,Upload } from 'antd';
import ImgCrop from 'antd-img-crop';
import moment from 'moment';

//base64图片文件
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}


class EditUserModal extends React.Component {
  constructor(props) {
    super(props);
    this.form = null;
    this.state = {
      submitBtnLoading: false,
      previewVisible: false,
      previewImage: '',
      fileList: [],
    }
  }
  formRef = React.createRef();

  // handle
  onSubmit = () => {
    this.formRef.current.validateFields()
      .then(async values => {
        // values.machine_image = this.state.imgUrl
        // values.id = this.state.imgUrl.split("_")[1].split(".png")[0]
        // // console.log("->previewImage",this.state.imgUrl)  http://localhost:8081/pic/type_5.png
        values.id = this.props.userTable?.id
        console.log("->vuale",values)
        await this.props.dispatch({type: 'adminModel/updateUserTable', payload: values});
        await this.props.hide();
        await this.formRef.current.resetFields() //清空表单
      })
      .catch(errorInfo => {
        console.log(errorInfo)
      });
  };

  handleCancelBtnClick = async () => {
    await this.formRef.current.resetFields() //清空表单
    await this.props.hide()
  };

  // life cycle
  initData = async () => {
  };

  componentWillMount() {
    this.initData().then(()=>null)
  }

  //图片预览取消函数
  handleCancel = () => this.setState({ previewVisible: false });

  //图片预览弹窗函数
  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  //上传文件改变时的状态，详情可以参考antd的Upload组件API参数
  onChange = ({fileList}) => {
    console.log("->fileList",fileList[0].response)
    if (fileList[0].response!==undefined){
      this.setState({
        imgUrl: fileList[0].response.data,
      });
    }

    this.setState({ fileList });
  };
  componentWillReceiveProps(nextProps) {
    this.setState({
      userTable: nextProps.userTable,
    })
  }

  companyChange(value){
    console.log("companyChange--",value);
    this.props.formRef.resetFields();   //<------就是加在这里

  }
  //重置表单
  resetForm = () => {
    this.formRef.current.resetFields()

  };


render() {
    return (
      <div>
        <Modal
          title="管理员编辑用户信息"
          visible={this.props.visible}
          onOk={this.onSubmit}
          onCancel={this.handleCancelBtnClick}
          afterClose={this.resetForm}
        >
          <Form
            labelCol={{span: 6}}
            wrapperCol={{span: 16}}
            ref={this.formRef}
            name="control-ref"
            onFinish={this.onFinish}
          >

            <Form.Item
                label="用户id"
                // name="id"
            >
              <Input placeholder="用户id" value={this.props.userTable?.id} disabled/>
            </Form.Item>

           <Form.Item
                label="角色"
                // name="user_role"
            >
              <Input placeholder="角色" value={this.props.userTable?.user_role} disabled/>
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
            >
              <Input placeholder="密码" type='text' />
            </Form.Item>

            <Form.Item
                label="余额"
                name="balance"
            >
              <Input placeholder="余额" type='text' />
            </Form.Item>

{/*
Input中
value 受控
defaultValue 非受控
*/}

          </Form>
        </Modal>
      </div>
    )

  }


}

function mapStateToProps({ loginModel, commonModel }) {
  const { isLogin, username, user_role } = loginModel;
  const { updateUserTable } = commonModel;
  return { isLogin, username, user_role,updateUserTable };
}

export default connect(mapStateToProps)(EditUserModal);
